<!--
* @Author: zhangjing
* @Date: 2025-06-05 14:18:08
* @Description: 同步资源=>
-->
<template>
	<div class="pannel" style="margin: 0 120px; width: auto">
		<div class="cardbox flex flex-v">
			<div class="bind-con">
				<div class="bind-hd">请使用移动端，<span style="color: #f00">同步资源</span>功能上传资源</div>
				<div class="bind-bd" style="width: 100%">
					<div class="list">
						<div style="height: 100%; overflow: auto; padding: 0 20px">
							<viewer ref="viewer" :options="options" :images="images" class="viewer" @inited="inited">
								<template #default="scope">
									<figure class="images">
										<div
											v-for="{ source, thumbnail, alt } in scope.images"
											:key="source"
											class="image-wrapper"
										>
											<img class="image" :src="thumbnail" :data-source="source" :alt="alt" />
										</div>
									</figure>
								</template>
							</viewer>
						</div>
					</div>
				</div>
			</div>
			<a href="javascript:;" class="closeWin" @click="reback"><img src="closeWin.png" alt="" /></a>
		</div>

		<div class="topicType">
			<img :src="`/impromptu${isPro ? '_pro' : ''}/topicType.png`" class="img" />
			<span class="name">资源</span>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import 'viewerjs/dist/viewer.css';
import VueViewer from 'v-viewer';
import Vue from 'vue';
Vue.use(VueViewer);
const sourceImages = [];
const base = Math.floor(Math.random() * 60) + 10;
export default {
	data() {
		return {
			form: {
				view: 0,
				zoom: -0.1,
				zoomTo: 0.8,
				rotate: 90,
				rotateTo: 180,
				scaleX: 1,
				scaleY: 1,
			},

			options: {
				inline: false,
				button: true,
				navbar: false,
				title: false,
				toolbar: true,
				tooltip: false,
				movable: true,
				zoomable: true,
				rotatable: true,
				scalable: true,
				transition: true,
				fullscreen: true,
				keyboard: false,
				url: 'data-source',
			},
			images: [],
			fileUrl: process.env.VUE_APP_FILE_API,
			csId: '',
		};
	},
	computed: {
		...mapState({
			isPro: (state) => state.isPro,
			previewResources: (state) => state.minProjectStore.previewResources, //显示资源
			getResources: (state) => state.minProjectStore.getResources, //刷新资源
			minProjectLogin: (state) => state.minProjectStore.minProjectLogin, //小程序是否登录
		}),
	},
	props: {
		//接收器信息
		machineData: {
			type: Object,
			default: () => {},
		},
		//表单数据
		formData: {
			type: Object,
			default: () => {},
		},
	},
	created() {
		let beginClassData = this.$ls.get('beginClass'); //上课数据
		this.csId = beginClassData.csId;
		this.findShareByCsId();
		this.addOpr();
	},
	watch: {
		previewResources: {
			handler(newValue, oldValue) {
				if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
					if (newValue.index >= 0) {
						this.$nextTick(() => {
							this.view(newValue.index);
							this.$nextTick(() => {
								let deg = (newValue.deg || 0) - (oldValue.deg || 0);
								this.rotate(deg > 0 ? deg : 360 + deg);
							});
						});
					} else {
						this.$nextTick(() => {
							this.hide();
						});
					}
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true, // 开启深度监听
		},
		getResources: {
			handler(newValue, oldValue) {
				if (newValue > 0 && newValue != oldValue) {
					this.findShareByCsId();
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true, // 开启深度监听
		},
	},
	methods: {
		//返回
		reback() {
			if (this.minProjectLogin) {
				this.$message.error('移动端正在控制PC端，请使用移动端手动关闭');
				return;
			}
			this.$emit('checkMenu', { type: 'resources' });
		},
		inited(viewer) {
			this.$viewer = viewer;
		},
		view(value) {
			if (value >= 0 && value < this.images.length) {
				this.$viewer.view(value);
			}
		},
		rotate(value) {
			this.$viewer.rotate(value);
		},
		show() {
			this.$viewer.show();
		},
		hide() {
			this.$viewer.hide();
		},
		findShareByCsId() {
			this.$postAction(this.$sysManageapi.answerUrl.findShareByCsId + '?csId=' + this.csId).then((da) => {
				let list = [];
				if (da.data && da.data.length > 0) {
					list = da.data.map((item, i) => {
						return {
							thumbnail: this.fileUrl + item.url.split(';')[1],
							source: this.fileUrl + item.url.split(';')[0],
							alt: `Image: ${base + i}`,
						};
					});
				}
				this.images = [...list];
			});
		},
		addOpr() {
			this.$postAction(this.$sysManageapi.answerUrl.addOpr, {
				classId: this.formData.classId,
				subjectCode: this.formData.subjectCode,
				opType: 'resources',
				userId: this.userinfo.userId,
			});
		},
	},
};
</script>

<style lang="less" scoped>
.pageView {
	width: 100%;
	height: 100vh;
}
.pannel {
	position: relative;
	width: 1162px;
	margin: 0 auto;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}
/* **头部题目类型** */
.topicType {
	width: 304px;
	height: 100px;
	line-height: 100px;
	position: fixed;
	top: 0;
	left: 49px;
	z-index: 7;
	.img {
		width: 304px;
		height: 100px;
		position: absolute;
		right: 0;
	}
	.name {
		position: absolute;
		top: 70%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30px;
		color: #fff;
	}
	@media screen and (max-width: 1366px) {
		width: 254px;
		height: 80px;
		line-height: 80px;
		.img {
			width: 254px;
			height: 80px;
		}
		.name {
			font-size: 28px;
		}
	}
}
.cardbox {
	overflow: visible;
	height: 100%;
	position: relative;
	margin-top: 0;
	padding-top: 15px;
}
.cardbox .closeWin {
	position: absolute;
	right: -20px;
	bottom: -16px;
	width: 46px;
	height: 46px;
	img {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.bind-con {
	height: calc(100vh - 100px);
	background: rgb(255, 255, 255);
	border-radius: 8px;
	margin-top: 0;
	position: relative;
}
.bind-hd {
	font-size: 22px;
	color: #2e2424;
	text-align: center;
	margin-top: 30px;
}
.bind-bd {
	width: 1162px;
	height: calc(100% - 92px);
	margin: 30px auto 0;
	background: rgb(243, 248, 255);
	border: 2px solid @primary-color;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}

	.list {
		margin: 20px;
		background: rgb(255, 255, 255);
		border: 2px dashed @primary-color;
		border-radius: 10px;
		height: calc(100% - 40px);
		font-size: 20px;
		color: #2e2424;
		padding: 20px;
		overflow: auto;
	}
}
.viewer {
	height: 100%;

	.images {
		height: 100%;
		display: flex;
		justify-content: center;
		// align-content: center;
		// align-items: center;
		flex-wrap: wrap;
		padding: 5px;

		.image-wrapper {
			display: inline-block;
			width: calc(33% - 20px);
			margin: 5px 5px 0 5px;

			.image {
				width: 100%;
				cursor: pointer;
				display: inline-block;
			}
		}
	}
}
</style>
